<template>
  <el-dialog
  title="预览文章"
  :visible="DialogIsShow"
  @close="btnCancel"
  width="60%">
  <div class="title">
    <h3>{{ArtData.title}}</h3>
    <span style="margin-left:15px">{{ ArtData.createTime | parseTimeByString }}</span>
    <span style="margin-left:15px">{{ArtData.username}}</span>
    <i class="el-icon-view" style="margin-left:15px"></i>
    <span style="margin-left:15px">{{ArtData.visits}}</span>
  </div>
  <div class="ql-container ql-snow content" style="background:#f5f5f5;margin-top:12px">
            <div class="ql-editor" v-html="ArtData.articleBody"></div>
          </div>
</el-dialog>
</template>

<script>
export default {
  props: {
    DialogIsShow: {
      type: Boolean,
      default: false,
      require: true
    },
    ArtData: {
      type: Object,
      require: true,
      default () {
        return {
        }
      }
    }
  },
  methods: {
    btnCancel () {
      this.$emit('update:DialogIsShow', false)
    }
  }
}
</script>

<style scoped lang='less'></style>
